<!doctype html>
<html lang="en">
  <head>
  
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	
    <title>Bootstrap</title>
  </head>
  <body>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  
<style>

  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

</style>

<div class="container-fluid text-center">

<div class="row">
<div class="col-xs-4"><h2 class="text-primary">Random Photos</h2></div>
<div class="col-xs-8"><i class="fas fa-thumbs-up"></i></div>
</div>

  <p><span class="text-danger">Click</span> here for <a href="#">Random photos</a>.</p>

  <a href="#"><img class="img-responsive" src="https://source.unsplash.com/random" alt="A random image."></a>
 <div class="row">
 <div class="col-xs-4"> <button class="btn btn-primary btn-block"><i class="fas fa-thumbs-up"></i>Like</button></div>
 <div class="col-xs-4"><button class="btn btn-info btn-block"><i class="fas fa-info-circle"></i>Info</button></div>
 <div class="col-xs-4"><button class="btn btn-danger btn-block"><i class="fas fa-trash"></i>Delete</button></div>
</div>
</div>

<div class="jumbotron">
<form action="/random">
	<label> Random Image Picking ...</label>
	<div class="row">
		<div class="col-xs-6">
			<label><input type="radio" name="r1"> Random 1</label>
		</div>
		<div class="col-xs-6">
			<label><input type="radio" name="r2"> Random 2</label>
		</div>
	</div>
		

	<div class="row">
		<div class="col-xs-4">
			<label><input type="checkbox" name="R1"> Picture 1</label>
		</div>
		<div class="col-xs-4">
			<label><input type="checkbox" name="R2"> Picture 2</label>
		</div>
	</div>	
	<div class="row">
	<div class="col-xs-7"><input class="form-control" type="text" placeholder="Your choice" required></div>
	<div class="col-xs-5"><button type="submit"><i class="fa fa-paper-plane"></i> Submit</button></div>
	</div>
</form>

</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>
